<template>
  <div class="leftMenu">
    <div class="collapseBox">
      <i
        v-show="!isCollapse"
        @click="changeCollapse"
        class="iconfont icon-shousuo active"
      ></i>
      <i
        v-show="isCollapse"
        @click="changeCollapse"
        class="iconfont icon-zhankai active"
        style="margin-right: 7px"
      ></i>
    </div>
    <!--  router
      :default-active="this.$route.path" -->
    <el-menu
      ref="leftMenu"
      unique-opened
      class="el-menu-vertical-demo"
      @mouseover="showSpan"
      @select="handleSelect"
      @open="handleOpen"
      @close="handleClose"
      :text-color="menuColor"
      active-text-color="#409EFF"
      active-background-color="#409EFF"
      :collapse="isCollapse"
    >
      <div v-for="(item, index) in nowMenus" :key="index" @mouseover="showSpan">
        <el-submenu v-if="item.children" :index="String(index)">
          <template slot="title">
            <i v-if="item.icon === ''" class="iconfont icon-qita2"></i>
            <i v-else :class="item.icon"></i>
            <span v-show="!isCollapse" slot="title">&nbsp;{{ item.name }}</span>
          </template>
          <div v-for="(item2, index2) in item.children" :key="index2">
            <el-submenu
              v-if="item2.children"
              :index="String(index) + '-' + String(index2)"
            >
              <template slot="title">
                <i v-if="item2.icon === ''" class="iconfont icon-qita2"></i>
                <i v-else :class="item2.icon"></i>
                <span slot="title">&nbsp;{{ item2.name }}</span>
              </template>
              <el-menu-item
                :index="item3.url"
                :menuFlag="item3.url"
                v-for="(item3, index3) in item2.children"
                :key="index3"
                @click="getCurrentPage(item3)"
              >
                <i v-if="item3.icon === ''" class="iconfont icon-qita2"></i>
                <i v-else :class="item3.icon"></i>
                <span slot="title">&nbsp;{{ item3.name }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :index="item2.url"
              :menuFlag="item2.url"
              @click="getCurrentPage(item2)"
            >
              <i v-if="item2.icon === ''" class="iconfont icon-qita2"></i>
              <i v-else :class="item2.icon"></i>
              <span slot="title">&nbsp;{{ item2.name }}</span>
            </el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item
          v-else
          :menuFlag="item.url"
          :index="item.url"
          @click="getCurrentPage(item)"
        >
          <i v-if="item.icon === ''" class="iconfont icon-qita2"></i>
          <i v-else :class="item.icon"></i>
          <span slot="title">&nbsp;{{ item.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "LeftMenu",
  data() {
    return {
      menus: {
        menus1: PF.toTree(JSON.parse(localStorage.getItem("menus1"))),
        menus2: PF.toTree(JSON.parse(localStorage.getItem("menus2"))),
        menus3: PF.toTree(JSON.parse(localStorage.getItem("menus3"))),
      },
      nowMenus: [],
      isCollapse: false,
      // menuColor: '#A9B0C6',
      menuColor: "#333333",
      menuDOMList: null, //菜单DOM
    };
  },
  props: ["leftMenusIndex"],
  watch: {
    leftMenusIndex(val) {
      if (val === 0) {
        this.nowMenus = this.menus.menus1;
      } else if (val === 1) {
        this.nowMenus = this.menus.menus2;
      } else if (val === 2) {
        this.nowMenus = this.menus.menus3;
      } else {
        this.nowMenus = this.menus.menus1;
      }
    },
  },
  methods: {
    // 获取当前页面
    getCurrentPage(page) {
      console.log(page);
      this.$emit("getCurrentPage", page);
    },
    // 改变当前选中的菜单
    changeCurrenMenu(menu) {
      let menuURL = menu.name;
      // 清除所有选中状态
      this.menuDOMList.forEach((item) => {
        if (item.classList.contains("is-active")) {
          // console.log(item);
          item.classList.remove("is-active");
          item.style.color = "#333333";
        }
      });

      // 得到当前菜单DOM
      let currentMenuDOM = Array.from(this.menuDOMList).find((item) => {
        let menuFlag = item.getAttribute("menuflag");
        if (menuFlag == menuURL) {
          return item;
        } else {
          return;
        }
      });

      // 将菜单的url按原来的数据结构展示
      let menuToURL = (menuList) => {
        return menuList.map((item) => {
          if (item.children) {
            return {
              url: item.url,
              children: menuToURL(item.children),
            };
          } else {
            return {
              url: item.url,
            };
          }
        });
      };
      let menuURLList = menuToURL(this.nowMenus);

      // 获取当前选中菜单的subMenu索引
      menuURLList.forEach((item, index) => {
        console.log(item);
        if (item.children) {
          item.children.forEach((_item, _index) => {
            if (_item.children) {
              _item.children.forEach((item3) => {
                if (item3.url == menuURL) {
                  this.$refs.leftMenu.open(`${index}-${_index}`);
                }
              });
            } else {
              if (_item.url == menuURL) {
                this.$refs.leftMenu.open(`${index}`);
              }
            }
          });
        }
      });
      currentMenuDOM.classList.add("is-active");
      currentMenuDOM.style.color = "#409eff";
    },
    showSpan() {
      $(".el-tooltip__popper>div>span").css("display", "");
      /*setTimeout(() => {
            $('.el-tooltip__popper>div>span').css('display','')
        },100)*/
    },
    handleSelect(index, indexPath) {
      // console.log(index, indexPath);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    toRouter(url) {
      this.$router.push(url);
    },
    changeCollapse(val) {
      if (typeof val === "boolean") {
        this.isCollapse = val;
      } else {
        this.isCollapse = !this.isCollapse;
      }
      this.$emit("isCollapse", this.isCollapse);
      if (this.isCollapse) {
        document.querySelector(".leftMenu").style.width = "64px";
      } else {
        document.querySelector(".leftMenu").style.width = "150px";
      }
    },
    isModule() {
      let path = this.$route.path;
      if (path.length <= 1) {
        return false;
      }
      let isHave = false;
      let moduleName = "";
      for (let i = 0; i < path.length; i++) {
        if (path[i] === "/") {
          if (!isHave) {
            isHave = true;
          } else {
            if (moduleName === "work") {
              this.nowMenus = this.menus.menus1;
            } else if (moduleName === "base") {
              this.nowMenus = this.menus.menus2;
            } else if (moduleName === "report") {
              this.nowMenus = this.menus.menus3;
            }

            return false;
          }
        } else {
          moduleName += path[i];
        }
      }
    },
    getSysParamMasterDetailData() {
      IOT.getServerData(
        "/sys/params",
        "get",
        { paramCode: "isCollapse" },
        (ret) => {
          if (ret.code === 200) {
            if (ret.rows[0].value === "1") {
              this.changeCollapse(false);
            } else if (ret.rows[0].value === "0") {
              this.changeCollapse(true);
            }
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
  },
  created() {
    this.getSysParamMasterDetailData();

    // 获取到登录后角色的登录页所在的菜单
    let val = localStorage.getItem("menu_index");
    if (val === 0) {
      this.nowMenus = this.menus.menus1;
    } else if (val === 1) {
      this.nowMenus = this.menus.menus2;
    } else if (val === 2) {
      this.nowMenus = this.menus.menus3;
    } else {
      this.nowMenus = this.menus.menus1;
    }
  },
  mounted() {
    this.isModule();
    this.menuDOMList = document.querySelectorAll(
      "ul.el-menu-vertical-demo.el-menu li.el-menu-item"
    );
  },
};
</script>

<style scoped lang="less">
.leftMenu {
  color: #adb4c9;
  transition: width 0.3s;
  padding-bottom: 30px;

  .collapseBox {
    text-align: right;
    padding-right: 20px;
    margin: 10px 0px;
  }

  .active {
    cursor: pointer;
  }

  .active:hover {
    color: #409eff;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
  }

  .el-menu {
    border-right: 0;
    .iconfont {
      color: #333333;
    }
    .el-submenu__icon-arrow {
      top: 55%;
      right: 15px;
    }
    .el-menu-item.is-active {
      /*color: #409EFF;*/
      border-left: 8px solid #409eff;
      /*background: #d9ecff;*/
      background-image: linear-gradient(to right, #ecf5ff, #ffffff);
      /*span{
          color: #ffffff;
        }*/
    }
  }
}
</style>
